@import (reference) '../../variable.less';

.wea-edc-form-signature {
  .wea-edc-form-btn {
    padding: 6px 60px;
    margin-bottom: 5px;
    border-radius: 2px;
  }
}
  
.wea-edc-signature_pad {
  border: 1px solid @border-color;
  margin-bottom: 5px;

  .signature_pad-toolbar {
    padding: 3px 10px;
    text-align: right;
    line-height: 24px;
    background: #eee;

    .disabled {
      cursor: not-allowed;
      color: #888;
      pointer-events: none;
    }
  }

  img,
  canvas {
    display: block;
  }

  .signature_pad-footer {
    user-select: none;
    border-top: 1px solid @border-color;
    padding: 7px 10px;

    & > span {
      line-height: 30px;
      color: @font-color-light;
    }
    & > div {
      float: right;
    }
    button {
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.mobile-device {
  .wea-edc-form-signature {
    .wea-edc-form-btn {
      display: block;
      width: 100%;
      padding: 8px 15px;
    }
  }

  .signature_pad-footer {
    padding: 0;

    & > span {
      display: none;
    }
    & > div {
      float: none;
    }
    button {
      width: 50%;
      margin: 0;
      border: none;
      border-radius: 0;
      border-right: 1px solid @border-color;
      padding: 7px 15px;

      &:last-child {
        border-right: none;
      }
      &.signature_pad-btn-del {
        width: 100%;
      }
    }
  }
}